<template>
	<view class="u-page">
		<view class="top">
				同时申请3个以上产品 下款更快哦！
		</view>
		
		<view>
			<up-list
				@scrolltolower="scrolltolower"
			>
				<up-list-item
					 labelWidth="220rpx"
					v-for="(item, index) in indexList"
					:key="index"
				>
					<up-cell>
						<template #icon>
							<up-avatar
								shape="square"
								size="60"
								:src="item.url"
								customStyle="margin: -3px 5px -3px 0"
							></up-avatar>
							 <!-- 通过自定义样式覆盖默认内容区域 -->
							 <view class="custom-cell-content">
							   <view class="title-line">
								 <text class="product-name">产品名称-{{ index + 1 }}</text>
								 <text class="success-rate">放款成功率90%</text>
							   </view>
							   <view class="loan-features">放款快/额度高/随借随还</view>
							   <view class="loan-limit">最高可借200000</view>
							 </view>
						</template>
					</up-cell>
				</up-list-item>
			</up-list>
		</view>
	</view>
</template>

<style scoped>
	
	.top{
		display: flex; /* 启用 Flexbox 布局 */
		flex-direction: column; /* 设置主轴方向为垂直 */
		align-items: center; /* 水平居中对齐 */
		justify-content: center; /* 垂直居中对齐 */
		border: 1rpx solid rgba(128, 128, 128, 0.3);
		height: 6vh;
		margin: 2vh 1vh 2vh 1vh;
	}
	.custom-cell-content {
	  display: flex;
	  flex-direction: column; /* 垂直排列其他信息 */
	}

	.title-line {
	  display: flex; /* 水平方向布局 */
	  justify-content: space-between; /* 主轴方向上均匀分布 */
	  align-items: center; /* 垂直居中 */
	}

	.product-name {
	  flex: 1; /* 让产品名称占据剩余空间 */
	  color: #333;
	}

	.success-rate {
	  margin-left: 80px; /* 添加一些左边距 */
	  color: #3498db; /* 设置放款成功率的颜色 */
	  white-space: nowrap; /* 防止折行，强制在一行显示 */
	}

	.loan-features,
	.loan-limit {
	  color: #666;
	}
</style>



<script>
	export default {
		data() {
			return {
				indexList: [],
				urls: [
					'https://uview-plus.jiangruyi.com/album/1.jpg',
					'https://uview-plus.jiangruyi.com/album/2.jpg',
					'https://uview-plus.jiangruyi.com/album/3.jpg',
					'https://uview-plus.jiangruyi.com/album/4.jpg',
					'https://uview-plus.jiangruyi.com/album/5.jpg',
					'https://uview-plus.jiangruyi.com/album/6.jpg',
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 5; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
	}
</script>